<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp" %>

<div id="${param.id }" class="guocheshisjiank_xiangzhenb_top_selec" >
	<div class="shebeigaibddian_selec">
		<div class="biaotikaklou_selec">
			<h3 class="haikxiaoshwj1_selec" id="haikxiaoshwj1_selec"><span>请选择卡口</span></h3>
		</div>
		<div class="tanchuxuankdhsg_selec" style="display:none">
				<div class="treeheader_selec">
					<input type="text" id="tetxuank1_selec" class="tetxuank1_selec" value="请输入卡口名称" onkeydown= "if(event.keyCode==13)querykkxx()" onblur="onblurfun()" onfocus="onfocusfun()" onkeyup="onkeyupfun()"/>
					<input type="button" class="tetxuank2_selec" onclick="querykkxx()"/>
				</div>
				<!-- <div id="sidetreecontrol_selec"><a href="#">全部关闭</a> | <a href="#">全部展开</a></div> -->				
				<div class="treediv_selec" id="treediv_selec" name="cheksp">
					<ul>
					</ul>
				</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var cityall=null;
var isquery=0;//是否模糊过
var m = 0;
//对外接口函数，调用返回卡口编号 格式： kkbh1，kkbh2，kkbh3,...
function getKkbhs(){
    var chk_value =[];//定义一个数组    
    $('input[name = ?:chkItem]:checked').each(function(){
     
      //与过车记录查询页面中的checkbox区分开
      if($(this).attr("name")!="mohuchaxun"){    	
	  	  if($(this).attr("idname")=="xzqh"){
	  		  for (var ind in cityall) {
	  			  if(cityall[ind].cityid == $(this).val()){
	  				  chk_value.push(cityall[ind].kkbh); 
	  			  }
			  }
	  	  }else{
	  		  chk_value.push($(this).val());
	  	  }
      }
    });
    
    var relve="";
    for(var i=0;i<chk_value.length;i++){
  	  if(i<(chk_value.length-1)){
  		  relve+=chk_value[i]+","; 
  	  }else{
  		  relve+=chk_value[i];
  	  }
    }

    return relve;
}

//统计选择项数
function counts(){
	var chk_value =[];//定义一个数组,存放卡口编号
	var chk_kkbhname=[];//定义一个数组，存放 卡口编号和卡口名称  格式“kkbh-kkmc” 
	var arr = [];
	var commonname="";	
    $('input[name = ?:chkItem]:checked').each(function(){ 
    	
       //与过车记录查询页面中的checkbox区分开
       if($(this).attr("name")!="mohuchaxun"){
    	
	  	  if($(this).attr("idname")=="xzqh"){
	  		  commonname=$(this).attr("name");
	  		  for (var ind in cityall) {
	  			  if(cityall[ind].cityid == $(this).val()){
	  				  chk_value.push(cityall[ind].kkbh); 
	  				  chk_kkbhname.push(cityall[ind].kkbh+"-"+cityall[ind].kkmc); 
	  				  arr.push(cityall[ind]);
	  			  }
			  } 
	  	  }else{
	  		  if(commonname!=$(this).attr("name")){
	  			 chk_value.push($(this).val());
	  			 chk_kkbhname.push($(this).val()+"-"+$(this).attr("checkname"));
	  		  }  		 
	  	  }
	  	  
       }
    });	
	if(chk_value.length>0){
		//用于多卡口页面展示多卡口名称时使用，该参数由多卡口的页面传入
		 if(null!=$("#manyVmc").val() && $("#manyVmc").val()!=''){
			 if($("#manyVmc").val()=='1'){
				 m=1;
			 }else if($("#manyVmc").val()=='2'){
				 $("#manyVmc").val("1");
				 m = 1;
			 }else if($("#manyVmc").val()=='3'){
				m=0;
			 }
			  
		    }
		//当m=1时调用展示方法，此方法写在页面上
		 if(m==1){
			 showKks(chk_kkbhname);
		 }
		$("#haikxiaoshwj1_selec span").empty();
		$("#haikxiaoshwj1_selec span").html("已选择"+chk_value.length+"个");
	}else{
		if(null!=$("#manyVmc").val() && $("#manyVmc").val()!=''){
			showKks("1");
		}
		$("#haikxiaoshwj1_selec span").empty();
		$("#haikxiaoshwj1_selec span").html("请选择卡口");
	}
}

//按照指定卡口名称查询
function querykkxx(){	
	var kkmcy=$("#tetxuank1_selec").val();
	if(kkmcy==null || kkmcy=="" || kkmcy=="请输入卡口名称"){
		return;
	}
	isquery=1;

	$.ajax({
		type:'POST',
		url:'${ctx}/kkxx/getKkxxListByKkname.htm',
		data:{
			kkName:kkmcy
		},
		dataType:'json',
		success:function(data, textStatus, jqXHR){
			
			$("#treediv_selec ul").empty();//清空原始数据
			
			var treedivBodyStr="";
			var LIST =data["kkxxlistbykkname"];
			for (var i=0;i< LIST.length;i++) {
	  				if(i>0){
	  					if(LIST[i].cityid==LIST[i-1].cityid){
	  						continue;
	  					}
	  				}
	  				treedivBodyStr+="<li>";
	  				treedivBodyStr+="<span>";
	  				treedivBodyStr+="<strong>";
	    			treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
	  				treedivBodyStr+="<input class='woygeiyangshisj' id=\"ID"+LIST[i].cityid+"\" idname=\"xzqh\" checkname=\""+LIST[i].cityname+"\" name=\"chkItem"+LIST[i].cityid+"\" value=\""+LIST[i].cityid+"\" type=\"checkbox\" onclick=\"quhuaCheck('ID"+LIST[i].cityid+"','chkItem"+LIST[i].cityid+"')\">";
	  				treedivBodyStr+="<a href=\"#\">"+LIST[i].cityname+"</a>";
	    			treedivBodyStr+="</div>";
	  				treedivBodyStr+="</strong>";
	  				treedivBodyStr+="</span>";	  				
	  				treedivBodyStr+="<ul id=\"ul"+LIST[i].cityid+"\" isemptys=\"0\">";
			    	for(var j=0;j< LIST.length;j++){
			    		if(LIST[i].cityid==LIST[j].cityid){
			    			treedivBodyStr+="<li class=\"jichulydianhsyeh\">";
			    			treedivBodyStr+="<div class=\"erjiyemianjiayigexian\">";			    			
			    			treedivBodyStr+="<input class=\"woygeiyangshisj\" id=\"ID"+LIST[j].kkbh+"\" name=\"chkItem"+LIST[j].cityid+"\" checkname=\""+LIST[j].kkmc+"\" value=\""+LIST[j].kkbh+"\" type=\"checkbox\" onclick=\"kakouCheck('ID"+LIST[j].kkbh+"','chkItem"+LIST[j].cityid+"','ID"+LIST[j].cityid+"')\">"+LIST[j].kkmc;
			    			treedivBodyStr+="</div>";
			    			treedivBodyStr+="</li>";
			    		}			    	
			    	}
			    	treedivBodyStr+="</ul>";
			    	treedivBodyStr+="</li>";
			}
		    $("#treediv_selec ul").html(treedivBodyStr);

		    cityall=data["kkxxlistbykkname"];
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
		}
	});
	
	$("#haikxiaoshwj1_selec span").empty();
	$("#haikxiaoshwj1_selec span").html("请选择卡口");
}

//选择某个城市触发事件
function quhuaCheck(id,name){
	var ischeck=""+$("#"+id).attr("checked");	
	if(ischeck=="checked"){
    	$("[name = "+name+"]:checkbox").attr("checked", true);
    }else{
    	$("[name = "+name+"]:checkbox").attr("checked", false);	
    } 	
}

//选择某个卡口触发事件
function kakouCheck(id,name,parentid){
	var ischeck=""+$("#"+id).attr("checked");	
	if(ischeck=="checked"){
    	$("#"+id).attr("checked", true);    	    
    	var marks=0;
    	var answer= document.getElementsByName(name);
		for(var i=0;i<answer.length;i++){
			if(i>0 && !answer[i].checked ){
		     marks=1;
			 break;
			}
		}
		if(marks==0){
			$("[name = "+name+"]:checkbox").attr("checked", true);	
		}
    }else{
    	$("#"+id).attr("checked", false);
    	$("#"+parentid).attr("checked", false);	
    }	
}

//点击城市展开或收起
function zksq(ulid,parentid){	
	var quhua=ulid.substr(2, 6);	
	if($("#"+ulid).attr("isemptys")=="1"){
		$("#"+ulid).empty();
		$("#"+ulid).attr("isemptys", "0");
	}else{
		$.ajax({
			type:'POST',
			url:'${ctx}/kkxx/getTheCityKkxx.htm',
			data:{
				cityId:quhua
			},
			dataType:'json',
			success:function(data, textStatus, jqXHR){				
				var LIST = data["thecitykkxxlist"];
				var ulBodyStr="";
				for (var ind in LIST) {
					ulBodyStr+="<li class=\"jichulydianhsyeh\">";
					ulBodyStr+="<div class=\"erjiyemianjiayigexian\">";
					ulBodyStr+="<input class='woygeiyangshisj' id=\"ID"+LIST[ind].kkbh+"\" name=\"chkItem"+quhua+"\" checkname=\""+LIST[ind].kkmc+"\" value=\""+LIST[ind].kkbh+"\" type=\"checkbox\" onclick=\"kakouCheck('ID"+LIST[ind].kkbh+"','chkItem"+quhua+"','ID"+quhua+"')\">"+LIST[ind].kkmc;
					ulBodyStr+="</div>";
					ulBodyStr+="</li>";	
				}
				$("#"+ulid).html(ulBodyStr);
				$("#"+ulid).attr("isemptys", "1");
				
				var ischeck=""+$("#"+parentid).attr("checked");	
				if(ischeck=="checked"){
					$("[name = chkItem"+quhua+"]:checkbox").attr("checked", true);	
				}
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){			
			}
		});
	}
}

//刷新恢复最初下拉列表状态
function freshing(){
	$("#tetxuank1_selec").attr("value","请输入卡口名称"); 
	
	$.ajax({
		type:'POST',
		url:'${ctx}/kkxx/getCitys.htm',
		dataType:'json',
		success:function(data, textStatus, jqXHR){
			$("#treediv_selec ul").empty();//清空原始数据
			var treedivBodyStr="";
		    $.each(data["cityslist"],function(i,node){
		    	treedivBodyStr+="<li>";
		    	treedivBodyStr+="<span>";
		    	treedivBodyStr+="<strong>";
		    	treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
		    	treedivBodyStr+="<input  class='woygeiyangshisj' id=\"ID"+node.cityid+"\" idname=\"xzqh\" name=\"chkItem"+node.cityid+"\" checkname=\""+node.cityname+"\" value=\""+node.cityid+"\" type=\"checkbox\" onclick=\"quhuaCheck('ID"+node.cityid+"','chkItem"+node.cityid+"')\">";
		    	treedivBodyStr+="<a href=\"#\" onclick=\"zksq('ul"+node.cityid+"','ID"+node.cityid+"')\">"+node.cityname+"</a>";
		    	treedivBodyStr+="</div>";
		    	treedivBodyStr+="</strong>";
		    	treedivBodyStr+="</span>";
		    	treedivBodyStr+="<ul id=\"ul"+node.cityid+"\" isemptys=\"0\"></ul>";
		    	treedivBodyStr+="</li>";
		    }); 
		    $("#treediv_selec ul").html(treedivBodyStr);

		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
		}
	});
	
	$("#haikxiaoshwj1_selec span").empty();
	$("#haikxiaoshwj1_selec span").html("请选择卡口");
	isquery=0;
}

//onfocus事件
function onfocusfun(){
	if($('#tetxuank1_selec').attr("value")=="请输入卡口名称"){
		$('#tetxuank1_selec').attr("value","");
	}	
}

//onblur事件
function onblurfun(){
	if($('#tetxuank1_selec').attr("value") == ""){
		$('#tetxuank1_selec').attr("value","请输入卡口名称");			
	}
}

//onkeyup事件
function onkeyupfun(){
	if($('#tetxuank1_selec').attr("value")!="请输入卡口名称" && $('#tetxuank1_selec').attr("value").Trim()!=""){
		querykkxx();
	}
	if($('#tetxuank1_selec').attr("value").Trim()==""){
		freshing();
		$('#tetxuank1_selec').attr("value","");
	}
}

//去空格
String.prototype.Trim = function() {
	return this.replace(/(^\s*)|(\s*$)/g, "");
};

//自动执行 获取城市列表并加载
$("#${param.id }").ready(function(){	
	$.ajax({
		type:'POST',
		url:'${ctx}/kkxx/getCitysAndAllKkxx.htm',
		dataType:'json',
		success:function(data, textStatus, jqXHR){
			$("#treediv_selec ul").empty();//清空原始数据
			var treedivBodyStr="";
		    $.each(data["cityslist"],function(i,node){
		    	treedivBodyStr+="<li>";
		    	treedivBodyStr+="<span>";
		    	treedivBodyStr+="<strong>";
		    	treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
		    	treedivBodyStr+="<input class='woygeiyangshisj' id=\"ID"+node.cityid+"\" idname=\"xzqh\" name=\"chkItem"+node.cityid+"\" checkname=\""+node.cityname+"\" value=\""+node.cityid+"\" type=\"checkbox\" onclick=\"quhuaCheck('ID"+node.cityid+"','chkItem"+node.cityid+"')\">";
		    	treedivBodyStr+="<a href=\"#\" onclick=\"zksq('ul"+node.cityid+"','ID"+node.cityid+"')\">"+node.cityname+"</a>";
		    	treedivBodyStr+="</div>";
		    	treedivBodyStr+="</strong>";
		    	treedivBodyStr+="</span>";
		    	treedivBodyStr+="<ul id=\"ul"+node.cityid+"\" isemptys=\"0\"></ul>";
		    	treedivBodyStr+="</li>";
		    }); 
		    $("#treediv_selec ul").html(treedivBodyStr);
		    cityall=data["allkkxxlist"];
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
		}
	});
});

function setChecked(xzqh,fzbh,fkqId){
	if(xzqh != "" && xzqh != null){
		$.ajax({
			type:'POST',
			url:'${ctx}/kkxx/getCitysAndAllKkxx.htm',
			dataType:'json',
			success:function(data, textStatus, jqXHR){
				$("#treediv_selec ul").empty();//清空原始数据
				var treedivBodyStr="";
			    $.each(data["cityslist"],function(i,node){
			    	treedivBodyStr+="<li>";
			    	treedivBodyStr+="<span>";
			    	treedivBodyStr+="<strong>";
			    	treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
			    	if(node.cityid == xzqh){
			    		treedivBodyStr+="<input class='woygeiyangshisj' checked='checked' id=\"ID"+node.cityid+"\" idname=\"xzqh\" name=\"chkItem"+node.cityid+"\" checkname=\""+node.cityname+"\" value=\""+node.cityid+"\" type=\"checkbox\" onclick=\"quhuaCheck('ID"+node.cityid+"','chkItem"+node.cityid+"')\">";
			    	}else{
			    		treedivBodyStr+="<input class='woygeiyangshisj' id=\"ID"+node.cityid+"\" idname=\"xzqh\" name=\"chkItem"+node.cityid+"\" checkname=\""+node.cityname+"\" value=\""+node.cityid+"\" type=\"checkbox\" onclick=\"quhuaCheck('ID"+node.cityid+"','chkItem"+node.cityid+"')\">";
			    	}
			    	treedivBodyStr+="<a href=\"#\" onclick=\"zksq('ul"+node.cityid+"','ID"+node.cityid+"')\">"+node.cityname+"</a>";
			    	treedivBodyStr+="</div>";
			    	treedivBodyStr+="</strong>";
			    	treedivBodyStr+="</span>";
			    	treedivBodyStr+="<ul id=\"ul"+node.cityid+"\" isemptys=\"0\"></ul>";
			    	treedivBodyStr+="</li>";
			    }); 
			    $("#treediv_selec ul").html(treedivBodyStr);
			    counts();
			}
		});
	}else if(fzbh != null && fzbh != ""){
		$.ajax({
			type:'POST',
			url:'${ctx}/kkxx/findKkbhByFzbh.htm',
			data:{fzbh:fzbh},
			dataType:'json',
			success:function(data, textStatus, jqXHR){
				$("#treediv_selec ul").empty();//清空原始数据
				var LIST = data["cityslist"];
				var treedivBodyStr="";
				for(var i=0;i<LIST.length;i++){
					if(i>0){
						if(LIST[i].cityid == LIST[i-1].cityid){
							continue;
						}
					}
					treedivBodyStr+="<li>";
	  				treedivBodyStr+="<span>";
	  				treedivBodyStr+="<strong>";
	    			treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
	  				treedivBodyStr+="<a href=\"#\">"+LIST[i].cityname+"</a>";
	    			treedivBodyStr+="</div>";
	  				treedivBodyStr+="</strong>";
	  				treedivBodyStr+="</span>";	  				
	  				treedivBodyStr+="<ul id=\"ul"+LIST[i].cityid+"\" isemptys=\"0\">";
			    	for(var j=0;j< LIST.length;j++){
			    		if(LIST[i].cityid==LIST[j].cityid){
			    			treedivBodyStr+="<li class=\"jichulydianhsyeh\">";
			    			treedivBodyStr+="<div class=\"erjiyemianjiayigexian\">";			    			
			    			treedivBodyStr+="<input class=\"woygeiyangshisj\" checked='checked' id=\"ID"+LIST[j].kkbh+"\" name=\"chkItem"+LIST[j].cityid+"\" checkname=\""+LIST[j].kkmc+"\" value=\""+LIST[j].kkbh+"\" type=\"checkbox\" onclick=\"kakouCheck('ID"+LIST[j].kkbh+"','chkItem"+LIST[j].cityid+"','ID"+LIST[j].cityid+"')\">"+LIST[j].kkmc;
			    			treedivBodyStr+="</div>";
			    			treedivBodyStr+="</li>";
			    		}			    	
			    	}
			    	treedivBodyStr+="</ul>";
				}
				$("#treediv_selec ul").html(treedivBodyStr);
			    counts();
			}
		});
	}else if(fkqId != null && fkqId != ""){
		$.ajax({
			type:'POST',
			url:'${ctx}/kkxx/findKkbhByFkqId.htm',
			data:{fkqId:fkqId},
			dataType:'json',
			success:function(data, textStatus, jqXHR){
				$("#treediv_selec ul").empty();//清空原始数据
				var LIST = data["cityslist"];
				var treedivBodyStr="";
				for(var i=0;i<LIST.length;i++){
					if(i>0){
						if(LIST[i].cityid == LIST[i-1].cityid){
							continue;
						}
					}
					treedivBodyStr+="<li>";
	  				treedivBodyStr+="<span>";
	  				treedivBodyStr+="<strong>";
	    			treedivBodyStr+="<div class=\"xinjiayigecenglainong\">";
	  				treedivBodyStr+="<a href=\"#\">"+LIST[i].cityname+"</a>";
	    			treedivBodyStr+="</div>";
	  				treedivBodyStr+="</strong>";
	  				treedivBodyStr+="</span>";	  				
	  				treedivBodyStr+="<ul id=\"ul"+LIST[i].cityid+"\" isemptys=\"0\">";
			    	for(var j=0;j< LIST.length;j++){
			    		if(LIST[i].cityid==LIST[j].cityid){
			    			treedivBodyStr+="<li class=\"jichulydianhsyeh\">";
			    			treedivBodyStr+="<div class=\"erjiyemianjiayigexian\">";			    			
			    			treedivBodyStr+="<input class=\"woygeiyangshisj\" checked='checked' id=\"ID"+LIST[j].kkbh+"\" name=\"chkItem"+LIST[j].cityid+"\" checkname=\""+LIST[j].kkmc+"\" value=\""+LIST[j].kkbh+"\" type=\"checkbox\" onclick=\"kakouCheck('ID"+LIST[j].kkbh+"','chkItem"+LIST[j].cityid+"','ID"+LIST[j].cityid+"')\">"+LIST[j].kkmc;
			    			treedivBodyStr+="</div>";
			    			treedivBodyStr+="</li>";
			    		}			    	
			    	}
			    	treedivBodyStr+="</ul>";
				}
				$("#treediv_selec ul").html(treedivBodyStr);
			    counts();
			}
		});
	}
	
}

</script> 	       
<script type="text/javascript">
//为下拉列表绑定点击事件
$(function(){
 	$(".biaotikaklou_selec").click(function() {		
		if($(".shebeigaibddian_selec").find(".tanchuxuankdhsg_selec").is(':hidden')){
			$(".shebeigaibddian_selec").addClass("huangebeidhs_selec");
			$(".shebeigaibddian_selec").find(".tanchuxuankdhsg_selec").show(300);
		}else{
			$(".shebeigaibddian_selec").removeClass("huangebeidhs_selec");
			$(".shebeigaibddian_selec").find(".tanchuxuankdhsg_selec").hide(300);
			
			counts();
		}	
	});  	 
 	
 	$('#tetxuank1_selec').blur(function (){ 
 		if(isquery==1 && $(this).attr("value") == "请输入卡口名称"){
 			freshing(); 			
 		}
 	});
 	
 	//层内的link点击事件，让事件停止冒泡 
 	$(".guocheshisjiank_xiangzhenb_top_selec").click(function(event){  
 	    event=event||window.event;  
 	    event.stopPropagation();  
 	});
 	
 	//点击层外，隐藏这个层。由于层内的事件停止了冒泡，所以不会触发这个事件 
 	$(document).click(function(e){
 		if($(".shebeigaibddian_selec").find(".tanchuxuankdhsg_selec").is(':hidden')){
 			//do nothing
 			//用于多卡口页面展示多卡口名称时使用，该参数由多卡口的页面传入
 			if(null!=$("#manyVmc").val() && $("#manyVmc").val()!=''){
 				if($("#manyVmc").val()=='2'){
 					counts();
 				}
 			}
 		}else{
 			$(".shebeigaibddian_selec").removeClass("huangebeidhs_selec");
 			$(".shebeigaibddian_selec").find(".tanchuxuankdhsg_selec").hide(300);
 			counts();
 		} 		
 	}); 
 	
    /*  $(".shebeigaibddian_selec").click(function() {		
		if($(this).find(".tanchuxuankdhsg_selec").is(':hidden')){
			$(this).addClass("huangebeidhs_selec");
			$(this).find(".tanchuxuankdhsg_selec").show(300);
		}else{
			$(this).removeClass("huangebeidhs_selec");
			$(this).find(".tanchuxuankdhsg_selec").hide(300);
		}	
	}); */
}); 
</script>
<!-- <script type="text/javascript">
$(function(){
	$(".shebeigaibddian_selec").hover(function(){
		$(this).addClass("huangebeidhs_selec");
		$(this).find(".tanchuxuankdhsg_selec").show(300);
	},function(){
		$(this).removeClass("huangebeidhs_selec");
		$(this).find(".tanchuxuankdhsg_selecss").hide(300);
	});
});
</script> -->
<script type="text/javascript">
$(window).load(function() {
	var ultouchLi9 = $(".tanchuxuankdhsg_selec");
	ultouchLi9.css("height","263px");
});
$(window).resize(function() {
	var ultouchLi9 = $(".tanchuxuankdhsg_selec");
	ultouchLi9.css("height","263px");
});
</script>
 